/** 3. 合并不同搜索条件 */
<template>
  <div class="diff_container">
    <!-- 重构新布局 -->
    <a-row style="width: 100%" :gutter="32">
      <a-col :span="21">
        <a-tabs
          v-if="category_key_list.length > 0"
          style="width: 100%"
          v-model:active-key="active_category_key"
        >
          <a-tab-pane
            v-for="category in category_key_list"
            :key="category.key"
            :tab="`${category.site_name}-${category.category_name}`"
          >
            <a-tabs
              v-if="category.sel_conditions.length > 0"
              style="width: 100%; min-height: 240px"
              tab-position="left"
              v-model:active-key="category.active_condition_key"
            >
              <a-tab-pane
                style="
                  background-color: #f6f6f6;
                  border-radius: 8px;
                  margin: 0 24px 0 12px;
                  padding: 24px;
                "
                v-for="condition in category.sel_conditions"
                :key="condition.condition_code"
                :tab="condition.condition_name"
              >
                <div class="condition_options_container">
                  <a-checkbox
                    v-model:checked="condition.pick_me"
                    :indeterminate="
                      computed_indeterminate(condition.condition_options)
                    "
                    @change="checkall(condition)"
                  >
                    全选
                  </a-checkbox>
                  <a-divider />
                  <a-checkbox
                    v-for="option in condition.condition_options"
                    :key="option.option_code"
                    v-model:checked="option.pick_me"
                    @change="update_checkall(condition)"
                  >
                    {{ option.option_name }}
                  </a-checkbox>
                </div>
              </a-tab-pane>
            </a-tabs>
            <a-empty v-else />
          </a-tab-pane>
        </a-tabs>
        <a-empty v-else />
      </a-col>
      <a-col
        :span="3"
        style="display: flex; flex-direction: row; justify-content: center"
      >
        <a-space direction="vertical">
          <h3 style="margin: 12px 0; text-align: center">操作</h3>
          <a-button type="primary" @click="finish">提交保存</a-button>
          <a-button type="primary" @click="reset_all" danger>全部重置</a-button>
        </a-space>
      </a-col>
    </a-row>
  </div>
  <read-only-mask :enabled="step_data.read_only" />
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { message } from 'ant-design-vue';
import {
  fetch_process_data,
  update_step_data,
  get_process_step_data,
  get_site_data,
  get_condition_map_by_class,
} from '@/utils/selection';

const emit = defineEmits(['finish', 'update_pass_step']);

// 获取当前进度数据
const process_data = ref({});

// 步骤数据
const step_data = ref({
  read_only: false,
  diff_conditions: {},
});

// 站点列表
const site_list = ref([]);

// 选择的站点类目面板
const active_category_key = ref('');

// 站点类目面板列表
const category_key_list = ref([]);

// 生成站点类目面板列表
const gen_category_key_list = () => {
  // console.log(`output->site_list.value`, site_list.value);
  // console.log(
  //   `output->step_data.value.diff_conditions`,
  //   step_data.value.diff_conditions
  // );
  return site_list.value.map(item => {
    item.key = `${item.site_code}:${item.category_code}`;
    item.active_condition_key = '';
    item.sel_conditions =
      step_data.value.diff_conditions[item.site_code]?.filter(
        condition => condition.src_category_code === item.category_code
      ) ?? [];
    return item;
  });
};

// 计算是否全选
const update_checkall = condition => {
  condition.pick_me = condition.condition_options.every(
    option => option.pick_me
  );
};

// 计算是否半选
const computed_indeterminate = options => {
  return (
    options.some(option => option.pick_me) &&
    options.some(option => !option.pick_me)
  );
};

// 全选
const checkall = condition => {
  condition.condition_options.forEach(option => {
    option.pick_me = condition.pick_me;
  });
};

// 初始化: 获取当前步骤数据
onMounted(async () => {
  process_data.value = await fetch_process_data();

  // 读取站点列表
  site_list.value = get_site_data(process_data.value);

  // 读取不同组的分类搜索条件映射表
  const temp_diff_conditions = get_condition_map_by_class(
    process_data.value,
    'diff_group'
  );

  // 读取当前步骤数据
  const last_step_data =
    get_process_step_data(process_data.value, 'DIFF_MERGE')?.data ?? null;
  if (last_step_data) {
    step_data.value = last_step_data;
    message.success('读取过程数据成功');
  }

  // 构建搜索条件列表
  temp_diff_conditions.forEach(item => {
    if (!step_data.value.diff_conditions[item.site_code]) {
      step_data.value.diff_conditions[item.site_code] = [];
    }
    if (
      !step_data.value.diff_conditions[item.site_code].find(
        condition =>
          condition.condition_code === item.condition_code &&
          condition.src_category_code === item.category_code
      )
    ) {
      step_data.value.diff_conditions[item.site_code].push({
        condition_code: item.condition_code,
        condition_name: item.condition_name,
        condition_options: item.options.map(option => {
          option.pick_me = true; // 默认选中
          return option;
        }),
        src_category_code: item.category_code,
        pick_me: item.pick_me,
      });
    }
  });

  // 生成站点类目面板列表
  category_key_list.value = gen_category_key_list();

  // 默认选中第一个站点类目面板
  if (category_key_list.value.length > 0) {
    active_category_key.value = category_key_list.value[0].key;
    // 如果有搜索条件，则默认选中第一个搜索条件
    if (category_key_list.value[0].sel_conditions.length > 0) {
      category_key_list.value[0].active_condition_key =
        category_key_list.value[0].sel_conditions[0].condition_code;
    }
  }
});

// 完成步骤: 更新提交当前步骤数据
const finish = async () => {
  message.info('正在提交数据，请稍后...');
  // 设置只读
  step_data.value.read_only = true;
  // 更新提交当前步骤数据
  if (
    await update_step_data('DIFF_MERGE', process_data.value, step_data.value)
  ) {
    // 跳转到下一步
    emit('finish');
  }
};

// 全部重置
const reset_all = () => {
  // 遍历所有搜索条件和选项设置为选中
  for (let site_code in step_data.value.diff_conditions) {
    step_data.value.diff_conditions[site_code].forEach(condition => {
      condition.condition_options.forEach(option => {
        option.pick_me = true;
      });
      condition.pick_me = true;
    });
  }
  message.info('重置成功');
};
</script>

<script>
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
import ReadOnlyMask from '../commons/ReadOnlyMask.vue';
import {
  Card,
  Row,
  Button,
  Col,
  Checkbox,
  CheckboxGroup,
  Divider,
  Empty,
  Space,
  Tabs,
  TabPane,
} from 'ant-design-vue';
export default {
  components: {
    ACard: Card,
    ARow: Row,
    ACol: Col,
    ACheckbox: Checkbox,
    ACheckboxGroup: CheckboxGroup,
    AButton: Button,
    ADivider: Divider,
    AEmpty: Empty,
    ASpace: Space,
    ATabs: Tabs,
    ATabPane: TabPane,
    CloseCircleFilled,
    CheckCircleFilled,
  },
};
</script>

<style scoped>
.diff_container {
  padding: 10px 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}
</style>
